/*待选商品列表每一行，左侧商品图片*/
.product_list_img{max-width: 87px;max-height: 87px}
/*待选商品列表每一行，左侧商品图片容器*/
.product_img_box{
    height: 87px;
    display: -webkit-flex; /* Safari */
    display: flex;
    /*框内子元素沿cross轴排列*/
    flex-direction: row;
    /*框内内容居中排列*/
    justify-content: center;
    align-items: center;
}
/*待选商品列表每一行，右侧商品信息框容器*/
.product_info_box{
    display: -webkit-flex; /* Safari */
    display: flex;
    /*保持产品左框与右框固定为115px等高，结合flex布局，左框与右框从水平上看才能对齐*/
    height: 87px;
    /*框内子元素沿cross轴排列*/
    flex-direction: column;
    /*框内内容居中排列*/
    justify-content: center;
}
.product_title{
    color: #303133;
    font-size: 16px;
    font-weight: bolder;
    padding-top: 10px;
    text-align: left;
}
.product_comment{
    color: #909399;
    font-size: 12px;
}
.product_price{
    color: #F56C6C;
    font-size: 16px;
    font-weight: bold;
}

/*购物车弹出框动画容器*/
.transition-box {
    width: 100%;
    height: auto;
    border-radius: 4px;
    background-color: white;
    text-align: center;
    padding: 10px 20px;
    box-sizing: border-box;
    margin:0;
}
/*商品列表ul*/
ul{padding: 0;list-style: none}
/*购物车弹出框：商品列表行li*/
.cart-line{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 50px;
    border-bottom: solid 1px #DCDFE6
}
/*结账页面页脚容器*/
.footer{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 53px;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
}
/*结账页面mask*/
.mask{position:fixed;left:0;top:0;width: 100%;height: 100%;z-index: 98;background: grey;opacity:0.5;}
/*使v-cloak生效，以便没有运行vue前不会显示vue的数据标签*/
[v-cloak] {
    display: none;
}